<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <c:set value="${pageContext.request.contextPath}" var="path"></c:set>
    <link rel="stylesheet" type="text/css" href="${path}/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="${path}/layui/css/formSelects-v4.css">
    <script type="text/javascript" src="${path}/layui/layui.js"></script>
    <script src="${path}/js/jquery.min.js"></script>
</head>
<body>
<h2>用户管理</h2>
<hr>
<form action="" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" id="username" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline" style="width:300px">
                <select xm-select="roles" name="roles" id="roles" lay-filter="roles">
                    <option value="-1">全部</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-sm" onclick="reloadData();"><i class="layui-icon layui-icon-search"></i> 搜索</button>
        </div>
    </div>
</form>
<table id="userTable" lay-filter="userTable"></table>

<script>
    function reloadData(){
        layui.table.reload("userTable",{
            page:{
                curr : 1
            },
            where: {
                username : $("#username").val(),
                roleIds :layui.formSelects.value('roles','valStr')
            }
        })
    }

    //发送异步请求，加载所有的角色信息
    $.get('${path}/sysRole/search',function (data) {
        $.each(data,function () {
            var opt = $("<option></option>").appendTo('#roles');
            opt.text(this.name).val(this.id);
        })
    });


    layui.config({
        base: '${path}/layui/lay/modules/' //此处路径请自行处理, 可以使用绝对路径
    })

    //加载表格模块
    layui.use(['form',"table","formSelects"],function () {
        var table = layui.table;

        var form = layui.form;

        form.render();

        //渲染数据表格
        table.render({
            id: "userTable",
            elem : "#userTable",
            url : "${path}/sysUser/list",
            page : true,
            skin: 'line',
            even: true,
            toolbar:'#toolbarDemo',
            text:{
                none : '这个真没有！'
            },
            cols : [[
                {type:'checkbox'},
                {field:'id', title:'ID',width:80},
                {field:'username', title:'用户名'},
                {field:'salt', title:'颜值'},
                {field:'roles', title:'用户角色',templet:function (d) {
                        if(d.roles == null || d.roles.length==0){
                            return "-";
                        }
                        let str = "";
                        for(let role of d.roles){
                            str += role.name + " | ";
                        }
                        return str;
                    }},
                {field:'locked', title:'是否锁定',templet:'#lockedTem'},
                {field:'hello', title:'操作',toolbar:'#barDemo'}
            ]]
        });

        //监听表格的工具栏事件
        table.on('toolbar(userTable)',function(obj){
            var e = obj.event;

            switch (e){
                case 'add':
                    $.get('${path}/sysUser/form',function (str) {
                        layer.open({
                            type:1,
                            title : '添加用户',
                            area:'800px',
                            maxmin:true,
                            skin : 'layui-layer-molv',
                            content : str,
                            btn : ['确定','取消'],
                            yes:function (index) {
                                var params = $("#add_user_form").serialize();
                                $.post('${path}/sysUser/add',params,function () {
                                    table.reload('userTable');
                                    layer.close(index);
                                });
                            }
                        });
                    })
                    break;
                case 'batchDel':
                    //批量删除
                    //获取选中行
                    var rows = table.checkStatus('userTable');
                    var data = rows.data;
                    if(data.length == 0){
                        layer.msg('请选择要删除的数据',function () {});
                        return;
                    }
                    layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
                        //do something
                        var params = "";
                        for(let u of data){
                            params += "ids="+u.id + "&";
                        }
                        $.post('${path}/sysUser/batchDelete',params,function () {
                            layer.close(index);
                            table.reload('userTable');
                        });

                    });
                    break;
            }
        });

        //监听行工具事件
        table.on("tool(userTable)",function (obj) {
            var data = obj.data; //当前行的数据
            var e = obj.event;
            if(e == "edit"){ //edit
                $.get('${path}/sysUser/form',function (str) {
                    $.get('${path}/sysUser/view',{id:data.id},function(data){
                        layer.open({
                            title : '修改用户',
                            type : 1,
                            content : str,
                            skin : 'layui-layer-molv',
                            anim:0,
                            maxmin:true,
                            area : '800px',
                            btn : ['确定','取消'],
                            success:function(){
                                //让表单显示数据
                                form.val('userForm',data);
                                var timer = setInterval(function () {
                                    if($("#roles_add option").length > 1){
                                        clearInterval(timer);
                                        var ids = new Array();
                                        for(let role of data.roles){
                                            ids.push(role.id);
                                        }
                                        layui.formSelects.value('roles2',ids);
                                    }
                                },100)
                            },
                            yes:function (index) {
                                var params = $("#add_user_form").serialize();
                                $.post('${path}/sysUser/edit',params,function () {
                                    table.reload('userTable');
                                    layer.close(index);
                                });
                            }
                        });
                    });
                })
            }else if(e == "del"){ //delete
                layer.open({
                    title : "友情提示",
                    content : "真的要分手吗？",
                    btn : ['确定','取消'],
                    yes : function () {
                        $.post("${path}/sysUser/batchDelete",{ids:data.id},function () {
                            //关闭提示框，刷新表格
                            layer.msg("分手成功了");
                            table.reload('userTable');
                        });
                    }
                });
            }
        });
    });

</script>

<script type="text/html" id="barDemo">
    <a href="javascript:void(0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> </a>
    <a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="batchDel"><i class="layui-icon layui-icon-delete"></i> 批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="import"><i class="layui-icon layui-icon-export"></i> 导入数据</button>
    </div>
</script>
<script type="text/html" id="lockedTem">
    <input type="checkbox"  title="锁定" {{d.locked == 1 ? 'checked':''}}>
</script>

</body>
</html>
